<!-- 组件必须加 template -->
<template>
  <!-- 必须有一个根元素div  所有的div代码都要放到这里面 -->
  <div class="vue">
    <!-- HTML代码 -->
    <h1>hi,我的第一个Vue文件</h1>
    <!-- 
      {{  }}插值渲染 里面放的是data中定义的变量 如果没有定义直接使用会报错
      {{  }}可以写变量 也可以写js语法
    -->
    <h2>{{ name }}</h2>
    {{ age < 20 ?'莫欺少年穷':'你说的对' }}
    <h1>{{ obj.substring(0,4) }}</h1>
    <h2>
      <span>this is span</span>
    </h2>
  </div>
</template>
<!-- js代码 -->
 <script>
// export default 方便其他文件使用这个组件
    export default{
      name:'vue',
      // 放置变量
      data(){
        return{
          name:"李唯一",
          age:18,
          obj:'4:40下课'
        }
      },
      // 方法
      methods:{

      }
    }
</script>

 <!-- css -->
  <!-- scoped只在当前组件中生效 减少样式的冲突 -->
   
<style scoped lang="scss">
/* 
  css:层叠样式表
  // 都支持css语法 同时新增一些变量/运算
  sass: 和scss同一家
  scss: 是sass引入的新语法 兼容css3 继承sass
  less: 是css预处理器，新增一些变量和运算，less比sass和scss要慢 所以一般都用scss

*/
/* 导入scss*/
/* @表示src目录*/
@import '@/assets/style.scss'; 
// scss 变量:用$+名字
$main-color:#3a86d3;
$height:200px;
$s:100px;//可以做运算
h1{
  background-color: $main-color;
  height: $height - $s;
}
</style>